<style scoped>
  html, body, #app {
    width: 100%;
    height: 100%;
    font-family: FZHTJW--GB1-0;
    background: #F8FAFA;
    overflow-x: hidden;
    overflow: hidden;
  }
  .user_datt{
    width: 100%;
    height: 100%;
    margin-top: 0.88rem;
  }
  .swiper-container {
    width: 100%;
    height: 100%;

  }
  .swiper-slide {
    font-size: 18px;
    display: flex;
    flex-direction: column;
  }
  .submit{
    width: 6.8rem;
  }
</style>
<template>
    <div class="user_datt">
      <navx></navx>
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(qes,index) in question" @click="selectTi(index)">
            <div class="st-box">
              <div class="st-box-tit">
                <div class="st-type">{{qes.qtype}}</div>
                <div class="st-tihao">{{index+1}}/{{question.length}}</div>
              </div>
              <div class="st-title">{{qes.qtitle}}</div>
              <!--单选-->
              <div class="answer-list" :class="index2==savedati[index]?'bg':''"
                   @click="select_data(index2,qes.mid)"
                   v-for="(qestit,index2) in qes.options" v-if="qes.mid==0">
                <span>{{qestit}}</span>
              </div>
              <!--多选      :class="indexclass(index,index3)"-->
              <div class="answer-list" v-for="(qestit,index3) of qes.options"
                   v-if="qes.mid==1" @click="select_data(index3,qes.mid,index)">
                      <!--:class="index3==arrx[2][0]?'bg':''"-->

                <span>{{qestit}}</span>
              </div>

              <div class="submit">确定</div>
              <div class="submit2" @click.stop="datika">跳转</div>
            </div>
          </div>

        </div>
      </div>
    </div>
</template>

<script>
  import '../assets/css/components_swiper.css'
  import '../assets/css/swiper.min.css'
  import navx from '@/components/navx'
  import Swiper from '../../static/swiper.min'
  import '../assets/css/swiper.min.css'
  import axios from 'axios'
    export default {
        name: "com_swiper",
        data () {
          return {
            fail_id:[],
            fail_answer:[],
            arrx:[1,2,[3,4,5]],
            jiaoj_data:{uid:3,count:10,fail_count:5,fail_id:'',fail_answer:''},
            savedati:[[]],
            uesr_select:'', //当前题目号
            user_dati:[],  //存儲多选临时答案
            question:[],
            select:'',   //单选变色
            arr:[],   //存储 多选选项
            isdx:'',
          }
        },components:{
          navx
        },
        mounted(){
          var guestid2 = this.getQueryString('id') ;
          if(guestid2==1){
            this.getJinri()
          }
          var app=document.querySelector('#app');
          app.style.overflow='hidden';
          var swiper = new Swiper('.swiper-container', {
            pagination: {
              el: '.swiper-pagination',
            },
            observer:true,//修改swiper自己或子元素时，自动初始化swiper
            observeParents:true,//修改swiper的父元素时，自动初始化swiper
            navigation: {
              nextEl: '.submit'
            }
          });

        },
        filters: {
          qtype: function (value) {
            if (value=='1') {
              return '单选器'
            }else if(value=='2'){
              return '多选题'
            }else {
              return '复合题'
            }
          }
        },
        methods: {
          indexclass(index3,index){
            // var saveindex=this.savedati[index];
            return{
              active:inde3==index3,'bg':''
            }
          },
            answer(answer){
              if(answer=='A'){
               return answer=0
              }else if(answer=='B'){
                return answer=1
              }else if(answer=='C'){
                return  answer=2
              }else if(answer=='D'){
                return  answer=3
              }else if(answer='E'){
                return  answer=4
              }else if(answer=='F'){
                return  answer=5
              }
            },
            selectTi(index){
                this.uesr_select=index;
            },
            select_data2(index2,mid){
              console.log(index2)
            },
            select_data(index,mid){
             setTimeout(select,100)
             var that =this
             function select(){
               var index_ti=that.uesr_select; //题号
               var dq_ti=index;  //选项
               var dt_select;
               // console.log(mid,'类型')
               if(mid==1){ //多选题
                  that.$set(that.arr,index,index)
                  that.$set(that.savedati,index_ti,that.arr)

                    console.log('多选题',that.savedati)

               }else{  //單選
                 that.$set(that.savedati,that.uesr_select,index)
                 that.select=index;
                 var answer=that.answer(that.question[index_ti].answer)
                 if(answer==index){
                 }else {
                    var qid=that.question[index_ti].qid;
                    var fail_answer=that.question[index_ti].options[index];
                    that.fail_id[index_ti]=qid;
                    that.fail_answer[index_ti]=fail_answer;
                    // console.log(that.fail_id,that.fail_answer)
                 }
               }
             }
            },
            datika(){

              var swiper = new Swiper('.swiper-container', {
                pagination: {
                  el: '.swiper-pagination',
                },
                observer:true,//修改swiper自己或子元素时，自动初始化swiper
                observeParents:true,//修改swiper的父元素时，自动初始化swiper
                navigation: {
                  nextEl: '.submit'
                }
              });
              // swiper.slideTo(3, 1000, false);

              // $('#btn').click(function(){
              //   //切换到第一个slide，速度为1秒
              // })
            },
            getQueryString(variable) { //获取url参数
             var query = window.location.href;
             var vars = query.split("?");
             for (var i=0;i<vars.length;i++) {
               var pair = vars[i].split("=");
               if(pair[0] == variable){return pair[1];}
             }
             return(false);
            },
            getJinri(){
              axios.post('http://test.jiaoxue.com/question/index/index')
                .then(response => {
                  // response=JSON.parse(response)
                  var arr =[];
                  this.question=response.data;
                  for(var i in this.question){
                     arr.push(this.question[i])
                  }
                 this.question=arr.splice(0,3);
                   console.log(this.question)
                  this.question.forEach((item,index)=>{
                    if(item.answer.length>1){
                      item.mid=1  //说明是多选题
                    }
                  })
                })
                .catch(function (error) {
                  // alert('网络错误')
                });
            }
        }
    }
</script>


